<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <!-- Page pre-title -->
        <!-- <div class="page-pretitle">
          子标题
        </div> -->
        <h2 class="page-title" id="article_list_board_title">
          <!-- 如果是版块页面，那么文字替换成版块名 -->
          首页
        </h2>
        <!-- 帖子数量 -->
        <div class="text-muted mt-1" id="article_list_count_board"></div>
      </div>
      <!-- Page title actions -->
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <!-- 发新帖按钮 宽屏 -->
          <a  href="javascript:void(0);" class="btn btn-primary d-none d-sm-inline-block article_post">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                 stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
            发布帖子
          </a>
          <!-- 发新帖按钮 窄屏 -->
          <a href="javascript:void(0);" class="btn btn-primary d-sm-none btn-icon article_post" aria-label="发布帖子">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                 stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row">
      <!-- 左侧热门帖子区域 -->
      <div class="col-lg-3">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title mb-0">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-flame text-orange" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -3 4 -4 2z"/>
              </svg>
              热门帖子
            </h3>
            <button class="btn btn-icon btn-sm btn-ghost-secondary toggle-featured" data-bs-toggle="tooltip" title="展开/收起">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M6 15l6 -6l6 6"/>
              </svg>
            </button>
          </div>
          <div class="list-group list-group-flush" id="featured-articles">
            <!-- 热门帖子列表将通过JS动态添加 -->
          </div>
        </div>
      </div>
      <!-- 右侧帖子列表区域 -->
      <div class="col-lg-9">
        <div class="card">
          <div class="card-body">
            <div class="divide-y" id="artical-items-body">
              <!-- 动态生成帖子列表 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 正文 结束 -->
</div>
<script>
  $(function () {
    // ========================= 获取版块下帖子信息 =======================
    // 获取当前选中的版块
    let activeLiEl = $('#topBoardList>.active');
    // 构造query string
    let queryString = '';
    let boardData = activeLiEl.data('board');
    // 导航栏版块Item是否绑定版块数据
    if (boardData) {
      // 构造query string
      queryString = '?boardId=' + boardData.id;
      // 获取版块信息
      getBoardInfo(boardData.id);
    } else {
      // 设置版块名称
      $('#article_list_board_title').html('首页');
      $('#article_list_count_board').hide();
    }

    // ========================= 获取版块信息 =======================
    function getBoardInfo (boardId) {
      if (!boardId) {
        return;
      }
      // 发送请求， 成功后，显示版块相关信息
      $.ajax({
        type : 'get',
        url : 'board/getById?id=' + boardId,
        // 回调
        success : function (respData) {
          if(respData.code == 0) {
            let board = respData.data;
            // 成功时，更新页面的内容
            $('#article_list_board_title').html(board.name); // 版块名
            $('#article_list_count_board').html('帖子数量: ' +board.articleCount);
          } else {
            // 失败
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error : function () {
          // 提示信息
          $.toast({
            heading: '错误',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
        }

      });
    }

    // ========================= 获取帖子列表 =======================
    function loadArticles(page = 1, size = 10, callback) {
        let url = 'article/getAllByBoardId?current=' + page + '&size=' + size;
        if (boardData) {
            url += '&boardId=' + boardData.id;
        }

        $.ajax({
            type: 'get',
            url: url,
            success: function (respData) {
                if (respData.code == 0) {
                    $('#artical-items-body').empty();
                    listBuildArticleList(respData.data.records);
                    buildPagination(respData.data);
                } else {
                    $.toast({
                        heading: '警告',
                        text: respData.message,
                        icon: 'warning'
                    });
                }
                callback && callback();
            },
            error: function () {
                $.toast({
                    heading: '错误',
                    text: '访问出现问题，请与管理员联系.',
                    icon: 'error'
                });
                callback && callback();
            }
        });
    }

    // ========================= 构建分页控件 =======================
    function buildPagination(pageData) {
        const maxVisiblePages = 5; // 最多显示的页码数
        let paginationHtml = `
            <div class="d-flex justify-content-between align-items-center mt-4">
                <div class="text-muted">
                    共 ${pageData.total} 条记录，第 ${pageData.current}/${pageData.pages} 页
                </div>
                <ul class="pagination m-0">
        `;

        // 上一页按钮
        paginationHtml += `
            <li class="page-item ${pageData.current <= 1 ? 'disabled' : ''}">
                <a class="page-link" href="javascript:void(0);" data-page="${pageData.current - 1}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6"/></svg>
                    上一页
                </a>
            </li>
        `;

        // 计算显示的页码范围
        let startPage = Math.max(1, pageData.current - Math.floor(maxVisiblePages / 2));
        let endPage = Math.min(pageData.pages, startPage + maxVisiblePages - 1);
        startPage = Math.max(1, Math.min(startPage, pageData.pages - maxVisiblePages + 1));

        // 第一页
        if (startPage > 1) {
            paginationHtml += `
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0);" data-page="1">1</a>
                </li>
            `;
            if (startPage > 2) {
                paginationHtml += `
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                `;
            }
        }

        // 页码
        for (let i = startPage; i <= endPage; i++) {
            paginationHtml += `
                <li class="page-item ${i === pageData.current ? 'active' : ''}">
                    <a class="page-link" href="javascript:void(0);" data-page="${i}">${i}</a>
                </li>
            `;
        }

        // 最后一页
        if (endPage < pageData.pages) {
            if (endPage < pageData.pages - 1) {
                paginationHtml += `
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                `;
            }
            paginationHtml += `
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0);" data-page="${pageData.pages}">${pageData.pages}</a>
                </li>
            `;
        }

        // 下一页按钮
        paginationHtml += `
            <li class="page-item ${pageData.current >= pageData.pages ? 'disabled' : ''}">
                <a class="page-link" href="javascript:void(0);" data-page="${pageData.current + 1}">
                    下一页
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6"/></svg>
                </a>
            </li>
        `;

        paginationHtml += `
                </ul>
            </div>
        `;

        // 添加分页控件到页面
        $('#artical-items-body').append(paginationHtml);

        // 绑定页码点击事件
        $('.pagination .page-link').click(function() {
            if (!$(this).parent().hasClass('disabled')) {
                const page = $(this).data('page');
                loadArticles(page);
            }
        });
    }

    // ========================= 构造帖子列表 =======================
    function listBuildArticleList(data) {
      if(data.length == 0) {
        $('#artical-items-body').html('还没有帖子');
        return;
      }
      // 默认头像路径
      let avatarUrl = 'image/avatar01.jpeg';
      // 遍历结果
      data.forEach(article => {
        // 设置默认头像
        if (!article.user.avatarUrl) {
          article.user.avatarUrl = avatarUrl;
        }
        // 构造HTML
        let articleHtmlStr = '<div>'
                + ' <div class="row">'
                + ' <div class="col-auto">'
                + ' <span class="avatar" style="background-image: url(' + article.user.avatarUrl + ')"></span>'
                + ' </div>'
                + ' <div class="col">'
                + ' <div class="text-truncate">'
                + ' <a href="javascript:void(0);" class="article_list_a_title">'
                + ' <strong>' + article.title + '</strong>'
                + ' </a>'
                + ' </div>'
                + ' <div class="text-muted mt-2">'
                + ' <div class="row">'
                + ' <div class="col">'
                + ' <ul class="list-inline list-inline-dots mb-0">'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"'
                + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>'
                + ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>'
                + ' </svg> '
                + article.user.nickname
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg"'
                + ' class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"'
                + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
                + ' stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
                + ' <path d="M12 7v5l2 2"></path>'
                + ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z">'
                + ' </path>'
                + ' </svg> '
                + article.createTime
                + ' </li>'
                + ' </ul>'
                + ' </div>'
                + ' <div class="col-auto d-none d-md-inline">'
                + ' <ul class="list-inline list-inline-dots mb-0">'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"'
                + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
                + ' <path'
                + ' d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">'
                + ' </path>'
                + ' </svg> '
                + article.visitCount
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart"'
                + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path'
                + ' d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572">'
                + ' </path>'
                + ' </svg> '
                + article.likeCount
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg"'
                + ' class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"'
                + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
                + ' stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
                + ' <path d="M12 12l0 .01"></path>'
                + ' <path d="M8 12l0 .01"></path>'
                + ' <path d="M16 12l0 .01"></path>'
                + ' </svg> '
                + article.replyCount
                + ' </li>'
                + ' </ul>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>';
        // 转为元素对象
        let articleItem = $(articleHtmlStr);
        // 获取标题的 a 标签
        let articleTitle = articleItem.find('.article_list_a_title');
        // 处理标题点击事件
        articleTitle.click(function() {
          // 通过全局变量保存当前访问的帖子信息
          currentArticle = article;
          removeNavActive();
          $('#bit-forum-content').load('details.html');
        });
        // 添加到列表
        $('#artical-items-body').append(articleItem);
      });
    }

    // ================== 处理发贴事件 =====================
    $('.article_post').click(function () {
      console.log('加载发贴页面');
      removeNavActive();
      $('#bit-forum-content').load('article.html');
    });

    // ========================= 加载热门帖子 =======================
    function loadFeaturedArticles(callback) {
        $.ajax({
            type: 'get',
            url: 'article/getFeatured',
            success: function(respData) {
                if (respData.code == 0) {
                    $('#featured-articles').empty();
                    buildFeaturedArticlesList(respData.data);
                } else {
                    $.toast({
                        heading: '警告',
                        text: respData.message,
                        icon: 'warning'
                    });
                }
                callback && callback();
            },
            error: function() {
                $.toast({
                    heading: '错误',
                    text: '访问出现问题，请与管理员联系.',
                    icon: 'error'
                });
                callback && callback();
            }
        });
    }

    function buildFeaturedArticlesList(data) {
        if (!data || data.length == 0) {
            $('#featured-articles').html('<div class="list-group-item text-muted">暂无热门帖子</div>');
            return;
        }

        data.forEach(article => {
            let featuredArticleHtml =
                    '<a href="javascript:void(0);" class="list-group-item list-group-item-action featured-article-item">' +
                    '  <div class="row align-items-center">' +
                    '    <div class="col-auto">' +
                    '      <span class="avatar" style="background-image: url(' + (article.authorAvatar || 'image/avatar01.jpeg') + ')"></span>' +
                    '    </div>' +
                    '    <div class="col text-truncate">' +
                    '      <div class="d-flex align-items-center">' +
                    '        <span class="text-truncate article-title">' + article.title + '</span>' +
                    '      </div>' +
                    '      <div class="d-flex justify-content-between align-items-center text-muted mt-1">' +
                    '        <div class="author-info">' +
                    '          <small class="text-muted">' + article.authorName + '</small>' +
                    '        </div>' +
                    '        <div class="hot-score">' +
                    '          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline text-orange" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">' +
                    '            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>' +
                    '            <path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -3 4 -4 2z"/>' +
                    '          </svg>' +
                    '          <span class="ms-1 text-orange fw-bold">' + article.hotScore + '</span>' +
                    '        </div>' +
                    '      </div>' +
                    '    </div>' +
                    '  </div>' +
                    '</a>';

            let $featuredArticle = $(featuredArticleHtml);
            
            // 绑定点击事件
            $featuredArticle.click(function() {
                // 构建完整的文章对象以兼容现有代码
                currentArticle = {
                    id: article.id,
                    title: article.title,
                    visitCount: article.visitCount,
                    likeCount: article.likeCount,
                    replyCount: article.replyCount,
                    user: {
                        nickname: article.authorName,
                        avatarUrl: article.authorAvatar
                    }
                };
                removeNavActive();
                $('#bit-forum-content').load('details.html');
            });

            $('#featured-articles').append($featuredArticle);
        });
    }

    // 在热门帖子区域添加骨架屏
    function showFeaturedSkeleton() {
        const skeletonHtml = `
            <div class="list-group-item">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <div class="avatar placeholder"></div>
                    </div>
                    <div class="col">
                        <div class="placeholder-glow">
                            <div class="placeholder col-9 mb-2"></div>
                            <div class="placeholder col-6"></div>
                        </div>
                    </div>
                </div>
            </div>`.repeat(5); // 显示5个占位项

        $('#featured-articles').html(skeletonHtml);
    }

    // 在主列表区域添加骨架屏
    function showArticlesSkeleton() {
        const skeletonHtml = `
            <div class="mb-3">
                <div class="row">
                    <div class="col-auto">
                        <div class="avatar placeholder"></div>
                    </div>
                    <div class="col">
                        <div class="placeholder-glow">
                            <div class="placeholder col-7 mb-2"></div>
                            <div class="placeholder col-4"></div>
                        </div>
                    </div>
                </div>
            </div>`.repeat(5); // 显示5个占位项

        $('#artical-items-body').html(skeletonHtml);
    }

    // 修改初始状态为收起
    let isFeaturedExpanded = false; // 默认收起
    
    // 立即显示骨架屏但是隐藏起来
    showFeaturedSkeleton();
    $('#featured-articles').hide();
    $('.toggle-featured .icon')
        .removeClass('icon-tabler-chevron-up')
        .addClass('icon-tabler-chevron-down');
    $('.toggle-featured').attr('title', '展开').tooltip('dispose').tooltip();
    
    // 先移除已存在的提示信息（防止重复）
    $('.featured-hint').remove();
    
    // 添加提示信息
    $('#featured-articles').after(
        '<div class="text-center py-3 featured-hint" style="color: #fd7e14; cursor: pointer;">' +
        '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-flame" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">' +
        '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>' +
        '<path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -3 4 -4 2z"/>' +
        '</svg>' +
        '<span class="ms-2">点击查看热门帖子</span>' +
        '</div>'
    );

    // 同时发起数据请求
    Promise.all([
        new Promise((resolve) => {
            loadArticles(1, 10, resolve);
        }),
        new Promise((resolve) => {
            loadFeaturedArticles(resolve);
        })
    ]);

    // 处理提示信息点击事件
    $('.featured-hint').click(function() {
        expandFeaturedSection();
    });

    // 处理折叠按钮点击事件
    $('.toggle-featured').click(function() {
        if (isFeaturedExpanded) {
            collapseFeaturedSection();
        } else {
            expandFeaturedSection();
        }
    });

    // 展开热门帖子区域
    function expandFeaturedSection() {
        const $button = $('.toggle-featured');
        const $icon = $button.find('.icon');
        const $featuredArticles = $('#featured-articles');
        const $hint = $('.featured-hint');

        $featuredArticles.slideDown('fast');
        $icon.removeClass('icon-tabler-chevron-down').addClass('icon-tabler-chevron-up');
        $button.attr('title', '收起').tooltip('dispose').tooltip();
        $hint.slideUp('fast');
        isFeaturedExpanded = true;
        localStorage.setItem('featuredExpanded', 'true');
    }

    // 收起热门帖子区域
    function collapseFeaturedSection() {
        const $button = $('.toggle-featured');
        const $icon = $button.find('.icon');
        const $featuredArticles = $('#featured-articles');
        const $hint = $('.featured-hint');

        $featuredArticles.slideUp('fast');
        $icon.removeClass('icon-tabler-chevron-up').addClass('icon-tabler-chevron-down');
        $button.attr('title', '展开').tooltip('dispose').tooltip();
        $hint.slideDown('fast');
        isFeaturedExpanded = false;
        localStorage.setItem('featuredExpanded', 'false');
    }

    // 初始化提示工具
    $('[data-bs-toggle="tooltip"]').tooltip();
  });
</script>

<style>
  /* 热门帖子样式优化 */
  .text-orange {
    color: #fd7e14 !important;
  }

  .featured-article-item {
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
  }

  .featured-article-item:hover {
    background-color: rgba(253, 126, 20, 0.04);
    transform: translateX(3px);
  }

  .featured-article-item .avatar {
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid rgba(253, 126, 20, 0.1);
  }

  .featured-article-item:not(:last-child) {
    border-bottom: 1px solid rgba(98, 105, 118, 0.16);
  }

  .featured-article-item .article-title {
    font-weight: 500;
    color: #1e293b;
    line-height: 1.3;
  }

  .featured-article-item:hover .article-title {
    color: #fd7e14;
  }

  .hot-score {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background-color: rgba(253, 126, 20, 0.1);
    border-radius: 0.25rem;
  }

  .card-header .icon-tabler-flame {
    margin-right: 0.5rem;
  }

  /* 添加骨架屏样式 */
  .placeholder {
    background-color: rgba(98, 105, 118, 0.16);
    animation: placeholder-glow 2s ease-in-out infinite;
  }

  .avatar.placeholder {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
  }

  .placeholder-glow .placeholder {
    height: 0.8rem;
    border-radius: 2px;
  }

  @keyframes placeholder-glow {
    50% {
      opacity: 0.5;
    }
  }

  /* 添加折叠按钮样式 */
  .toggle-featured {
    transition: transform 0.2s ease;
  }

  .toggle-featured:hover {
    background-color: rgba(253, 126, 20, 0.1);
  }

  .toggle-featured .icon {
    transition: transform 0.2s ease;
  }

  .card-header {
    border-bottom: 1px solid rgba(98, 105, 118, 0.16);
  }

  #featured-articles {
    transition: all 0.3s ease;
  }

  /* 响应式调整 */
  @media (max-width: 991.98px) {
    .col-lg-3 .card {
        margin-bottom: 1rem;
    }
  }

  .featured-hint {
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 0.25rem;
  }

  .featured-hint:hover {
    background-color: rgba(253, 126, 20, 0.1);
  }

  .featured-hint svg {
    vertical-align: middle;
    color: #fd7e14;
  }

  .featured-hint span {
    vertical-align: middle;
    font-weight: 500;
  }
</style>